$tag-prefix-cls: "#{$css-prefix}tag";
$tag-close-prefix-cls: h-icon-ios-close-empty;

.#{$tag-prefix-cls} {
    display: inline-block;
    height: $tag-height;
    line-height: $tag-line-height;
    margin: $tag-margin;
    padding: $tag-padding;
    border: 1px solid $border-color-base;
    border-radius: $btn-border-radius-small;
    // background: $background-color-base;
    background: $tag-background;
    font-size: $tag-font-size;
    // vertical-align: middle;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
    //transition: all @transition-time @ease-in-out;
    > i {
        font-size: $tag-font-size;
        margin-left: $tag-i-margin-left;
    }
    &:not(.#{$tag-prefix-cls}-border):not(.#{$tag-prefix-cls}-dot):not(.#{$tag-prefix-cls}-checked){
        background: transparent;
        border: 0;
        color: $text-color;
        .#{$tag-close-prefix-cls} {
            color: $text-color !important;
        }
    }
    &-dot{
        height:$tag-dot-height;
        line-height:$tag-dot-line-height;
        border: 1px solid $border-color-base !important;
        color: $text-color !important;
        background: $tag-dot-background !important;
        padding:$tag-dot-padding;

        &-inner{
            width: $tag-dot-inner-width;
            height: $tag-dot-inner-height;
            margin-right: $tag-dot-inner-margin-right;
            border-radius: $tag-dot-inner-border-radius;
            background: $border-color-base;
            position: relative;
            top: $tag-dot-inner-top;
        }
        .#{$tag-close-prefix-cls} {
            color: $tag-dot-tag-close-color !important;
            margin-left:$tag-dot-tag-close-margin-left !important;
        }
    }

    &-border{
        height: $tag-border-height;
        line-height: $tag-border-line-height;
        border: 1px solid $border-color-base !important;
        color: $text-color !important;
        background: $tag-border-background !important;
        position: relative;

        .#{$tag-close-prefix-cls} {
            color: $tag-border-tag-close-color !important;
            margin-left: $tag-border-tag-close-margin-left !important;
        }

        &:after{
            content: "";
            display: none;
            width: 1px;
            background: $border-color-base;
            position: absolute;
            top: $tag-border-after-top;
            bottom: $tag-border-after-bottom;
            right: $tag-border-after-right;
        }

        &.#{$tag-prefix-cls}-closable {
            &:after{
                display: block;
            }
            .#{$tag-close-prefix-cls} {
                margin-left: 18px !important;
            }
        }

        &.#{$tag-prefix-cls}-blue {
            color: $link-color !important;
            border: 1px solid $link-color !important;

            &:after{
                background: $link-color;
            }
            .#{$tag-close-prefix-cls}{
                color: $link-color !important;
            }
        }
        &.#{$tag-prefix-cls}-green {
            color: $success-color !important;
            border: 1px solid $success-color !important;

            &:after{
                background: $success-color;
            }
            .#{$tag-close-prefix-cls}{
                color: $success-color !important;
            }
        }
        &.#{$tag-prefix-cls}-yellow {
            color: $warning-color !important;
            border: 1px solid $warning-color !important;

            &:after{
                background: $warning-color;
            }
            .#{$tag-close-prefix-cls}{
                color: $warning-color !important;
            }
        }
        &.#{$tag-prefix-cls}-red {
            color: $error-color !important;
            border: 1px solid $error-color !important;

            &:after{
                background: $error-color;
            }
            .#{$tag-close-prefix-cls}{
                color: $error-color !important;
            }
        }
    }

    &:hover {
        opacity: 0.85;
    }

    &,
    a,
    a:hover {
        color: $text-color;
    }

    &-text {
        a:first-child:last-child {
            display: inline-block;
            margin: $tag-text-a-margin;
            padding: $tag-text-a-padding;
        }
    }

    .#{$tag-close-prefix-cls} {
        font-size:$tag-font-size;
        cursor: pointer;
        margin-left: 8px;
        color: $tag-dot-tag-close-color;
        opacity: 0.66;
        position: relative;
        top: 1px;
        //transition: all @transition-time @ease-in-out;

        &:hover {
            opacity: 1;
        }
    }

    &-blue,
    &-green,
    &-yellow,
    &-red {
        border: 0;
        &,
        a,
        a:hover,
        .#{$tag-close-prefix-cls},
        .#{$tag-close-prefix-cls}:hover {
            color: $tag-close-hover-color;
        }
    }

    &-primary,
    &-success,
    &-warning,
    &-error {
        border: 0;
        &,
        a,
        a:hover,
        .#{$tag-close-prefix-cls},
        .#{$tag-close-prefix-cls}:hover {
            color: $tag-close-hover-color;
        }
        //.@{tag-close-prefix-cls}{
        //    top: 2px;
        //}
    }

    &-primary,
    &-primary.#{$tag-prefix-cls}-dot &-dot-inner
    {
        background: $link-color;
    }

    &-success,
    &-success.#{$tag-prefix-cls}-dot &-dot-inner
    {
        background: $success-color;
    }

    &-warning,
    &-warning.#{$tag-prefix-cls}-dot &-dot-inner
    {
        background: $warning-color;
    }

    &-error,
    &-error.#{$tag-prefix-cls}-dot &-dot-inner
    {
        background: $error-color;
    }
    span {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        display: block;
        float: left;
    }

}
.#{$tag-prefix-cls}-blue,
.#{$tag-prefix-cls}-blue.#{$tag-prefix-cls}-dot .#{$tag-prefix-cls}-dot-inner
{
    background: $link-color;
}

.#{$tag-prefix-cls}-green,
.#{$tag-prefix-cls}-green.#{$tag-prefix-cls}-dot .#{$tag-prefix-cls}-dot-inner
{
    background: $success-color;
}

.#{$tag-prefix-cls}-yellow,
.#{$tag-prefix-cls}-yellow.#{$tag-prefix-cls}-dot .#{$tag-prefix-cls}-dot-inner
{
    background: $warning-color;
}

.#{$tag-prefix-cls}-red,
.#{$tag-prefix-cls}-red.#{$tag-prefix-cls}-dot .#{$tag-prefix-cls}-dot-inner
{
    background: $error-color;
}
